<template>
	<div class='course-parent'>
		<TopNav
			showInform
			showAvatar
			showNavs
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="container">
			<div
				class="picker"
				v-for="item in types"
				:key="item.key"
			>
				<span class="label">{{item.label}}</span>
				<Button
					class="tag"
					v-for="tag in item.tags"
					:key="tag.id"
					width="106"
					height="42"
					fontSize="17"
					:bgColor="activeType(item.key,tag)? '#00C9A9' :' #EFF3F3'"
					:color="activeType(item.key,tag)? '#FFFFFF' :' #00493E'"
					@click="onclickTag(item, tag)"
				>
					{{tag.name}}
				</Button>
			</div>
			<div class="course">
				<CourseList
					size="300"
					column="4"
					:filterTag="[selectToy,selectInterest]"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import Toys from '@/mock/toys'
import Interest from '@/mock/interest'

export default {
  data() {
    return {
      types: [
        { label: '玩具类别', tags: Toys, key: 'selectToy' },
        { label: '改造方向', tags: Interest, key: 'selectInterest' },
      ],
      selectToy: 0,
      selectInterest: 0,
    }
  },
  computed: {
    activeType() {
      return function(key, tag) {
        console.log(key)
        return this[ key ] === tag.id
      }
    }
  },
  methods: {
    onclickTag(type, tag) {
      const val = this[ type.key ]

      if (val === tag.id) {
        this[ type.key ] = 0
      } else {
        this[ type.key ] = tag.id
      }
      console.log(this.selectToy, this.selectInterest)
    }
  }
}
</script>

<style lang='scss' scoped>
.course-parent {
  padding-top: 78px;
  background-color: #eff3f3;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .picker {
      width: 100%;
      padding-left: 50px;
      margin-bottom: 20px;

      .label {
        margin-right: 25px;
        font-size: 18px;
        color: #00493e;
      }

      .tag {
        margin-right: 12px;
        font-size: 17px;
      }
    }

    .course {
      margin-top: 40px;
    }
  }
}
</style>
